<template>
  <sections title="基本信息" class="b-cells" :content-height="contentHeight">
    <div class="x-container">
      <div class="row">
        <span class="label">任务名称</span>
        <span class="content">{{ detail.dutyname || detail.itemname }}</span>
      </div>
      <div class="row">
        <span class="label">任务状态</span>
        <span class="content">{{
          detail.dutystatus || detail.itemstatus | formatStatus
        }}</span>
      </div>
      <div class="row" v-if="detail.dutytypename">
        <span class="label">任务类型</span>
        <span class="content">{{ detail.dutytypename }}</span>
      </div>
      <div class="row">
        <span class="label">创建人</span>
        <span>{{ detail.createname }}</span>
      </div>
      <div class="row">
        <span class="label">创建时间</span>
        <span class="content">{{ detail.createt }}</span>
      </div>
      <div class="row">
        <span class="label">执行人</span>
        <span class="content">{{ detail.executename || detail.exename }}</span>
      </div>
      <div class="row" v-if="detail.executet">
        <span class="label">执行时间</span>
        <span class="content">{{ detail.executet }}</span>
      </div>
      <div class="row" v-if="detail.zonename">
        <span class="label">执行区域</span>
        <span class="content">{{ detail.zonename }}</span>
      </div>
      <div class="row" v-if="detail.remark">
        <span class="label">执行内容</span>
        <span class="content">{{ detail.remark }}</span>
      </div>
    </div>
  </sections>
</template>

<script>
import Sections from "../Sections/index.vue";
export default {
  name: "RelativeInfo",

  components: {
    Sections,
  },

  props: {
    /**高度 */
    height: { type: [Number], default: 0 },
  },

  filters: {
    formatStatus(status) {
      const statusMap = {
        1: "已完成",
        0: "未完成",
      };
      return statusMap[status];
    },
  },

  props: {
    detail: [Object],
  },

  data() {
    return {};
  },

  computed: {
    contentHeight() {
      if (this.height) {
        return document.documentElement.clientHeight - 305 + this.height + "px";
      } else {
        return document.documentElement.clientHeight - 305 + "px";
      }
    },
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.x-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .row {
    font-size: 13px;
    padding: 15px 10px;
    display: flex;
    align-items: center;
    .label {
      width: 100px;
      display: block;
    }
    .content {
      font-size: 13px;
      line-height: 2em;
      width: calc(100% - 100px);
      display: inline-block;
    }
  }
}
</style>